<template>
  <div class="busLines">
    <div class="bus-head">
      <van-icon name="arrow-left" @click="goBack" />智慧巴士
    </div>
    <div class="bus-content">
      <ul>
        <li class="content-item" v-for="item in list" :key="item.id">
          <div class="item-top">{{ item.name }}</div>
          <div class="item-mid">
            <span class="iconfont icon-gongjiaoche2"></span>
            {{ item.first }}&nbsp;<span
              class="iconfont icon-70BasicIcons-all-17"
              >&nbsp;</span
            >{{ item.end }}
          </div>
          <div class="item-bottom">
            <div class="bottom-left">
              <p>票价：{{ item.price }}</p>
              <p>首发时间：{{ item.startTime }}</p>
            </div>
            <div class="bottom-right">
              <p>里程：{{ item.mileage }}</p>
              <p>末班时间：{{ item.endTime }}</p>
            </div>
          </div>
          <van-collapse v-model="activeNames">
            <van-collapse-item name="1">
              <van-button type="primary" @click="goLineDetail(item.id)"
                >路线详情</van-button
              >
              <van-cell @click="showPopup(item)">添加订单</van-cell>
              <van-popup
                v-model="show"
                closeable
                close-icon-position="top-right"
                round
              >
                <div>
                  出发站：<select class="red" v-model="info.start">
                    <option
                      :value="i.name"
                      v-for="i in stopList"
                      :key="i.stepsId"
                    >
                      {{ i.name }}
                    </option>
                  </select>
                </div>
                <div>
                  终点站：<select class="red" v-model="info.end">
                    <option
                      :value="i.name"
                      v-for="i in stopList"
                      :key="i.stepsId"
                    >
                      {{ i.name }}
                    </option>
                  </select>
                </div>
                <div>车次：{{ currentBus }}号线</div>
                <div>价钱：8元</div>

                <div>
                  <van-button type="primary" @click="addBusOrderData(id)"
                    >确认添加</van-button
                  >
                </div>
              </van-popup>
            </van-collapse-item>
          </van-collapse>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import mixin from "@/mixin/flag";
import {
  getBusLineList,
  addBusOrder,
  getBusLineDetail,
} from "@/service/busService";
export default {
  mixins: [mixin],
  data() {
    return {
      show: false,
      id: "",
      activeNames: ["0"], //折叠
      list: [],
      currentBus: "", //当前bus
      stopList: [], //站点列表
      info: {
        start: "",
        end: "",
      },
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    // ------显示添加订单弹窗------
    showPopup(item) {
      this.show = true;
      this.currentBus = item.id;
      this.getLineDetailDate(item.id);
    },
    // 获取路线详情
    async getLineDetailDate(id) {
      console.log(66);
      const { data } = await getBusLineDetail(id);
      if (data.code !== 200) this.$toast(data.masg);
      this.stopList = data.rows;
      console.log(this.stopList);
    },

    //添加订单
    async addBusOrderData() {
      let info = {
        ...this.info,
        price: 8,
        path: this.currentBus + "号线",
        status: 0,
      };
      const { data } = await addBusOrder(info);
      if (data.code !== 200) return this.$toast(data.msg);
      this.$toast(`添加订单成功`);
      this.show = false;
      this.goLineDetail(this.currentBus);
    },
    // 跳转路线详情
    async goLineDetail(id) {
      this.$router.push(`/bus_query/detail?id=${id}`);
    },
    //获取bus数据
    async getBusDate() {
      const { data } = await getBusLineList();
      if (data.code !== 200) this.$toast(data.msg);
      this.list = data.rows;
    },
  },
  created() {
    this.getBusDate();
  },
};
</script>

<style lang="scss" scoped>
.busLines {
  background: #f4f4f4;
  .bus-head {
    background: #fff;
    padding-left: 10px;
    padding-right: 10px;
    height: 80px;
    line-height: 80px;
    font-weight: 800;
    font-size: 20px;
    text-align: center;
    position: -webkit-sticky;
    position: sticky;
    z-index: 1;
    top: 0px;
    i {
      color: #666;
      font-size: 28px;
      position: absolute;
      left: 0;
      top: 30px;
    }
  }
  .bus-content {
    margin: 20px;
    .content-item {
      background: #fff;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 5%;
      margin-bottom: 10px;
      .item-top {
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 20px;
        background: #0075fd;
        color: #fff;
        margin-top: 10px;
        border-radius: 5px;
      }
      .item-mid {
        font-size: 20px;
        margin-top: 30px;
        span {
          color: #24aa7d;
          font-size: 30px;
        }
        .icon-70BasicIcons-all-17 {
          font-size: 20px;
        }
      }
      .item-bottom {
        margin-top: 30px;
        display: flex;
        font-size: 14px;
        border-bottom: 1px solid #eee;
        div {
          margin: 15px;
          text-align: center;
          p {
            margin-bottom: 10px;
          }
        }
      }
      ::v-deep .van-collapse {
        width: 100%;

        .van-collapse-item {
          width: 100%;
          .van-cell {
            width: 100%;
            text-align: right;
            position: relative;
            height: 30px;

            i {
              position: absolute;
              right: 30px;
              top: 0px;
              font-size: 20px;
              text-align: right;
              border: none;
            }
          }
          .van-collapse-item__wrapper {
            padding-left: 30px;
            padding-right: 20px;

            .van-collapse-item__content {
              display: flex;
              justify-content: space-between;
              button {
                border-radius: 5px;
                width: 100px;
                height: 40px;
              }
              .van-cell {
                border-radius: 5px;
                width: 100px;
                text-align: center;
                height: 40px;
                font-size: 16px;
                box-sizing: border-box;
                margin-right: 20px;
                background: #07c160;
                .van-cell__value {
                  color: #fff;
                }
              }
              .van-popup {
                color: #333;
                width: 300px;
                height: 300px;
                box-sizing: border-box;
                padding-top: 20px;
                padding-bottom: 20px;
                font-size: 16px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                div {
                  height: 40px;
                  width: 200px;
                  line-height: 40px;

                  select {
                    width: 100px;
                    height: 30px;
                    margin-top: 5px;
                  }
                  .van-button {
                    width: 100%;
                    .van-button__content {
                      width: 100%;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
